<template>
  <div class="class">
    <!-- 搜索框 -->
    <van-search @click="toSearchPage" class="search" shape="round" background="#f7f8fa" placeholder="想租什么，搜一搜" />
    <!-- 占位 -->
    <div class="chunk" :style="{ height: nodeHeight + 'px' }"></div>
    <!-- 数据 -->
    <div class="content">
      <van-sidebar v-model="activeKey" class="nav" :style="{ height: contentHeight + 'px' }">
        <van-sidebar-item :title="item.name" class="l-item" :class="{ active: !item.sub?.length }"
          @click="switchData(item.id)" v-for="(item, index) in allClassifyData" :key="index" />
      </van-sidebar>
      <div class="dataList" :style="{ height: contentHeight + 'px' }">
        <img class="banner" v-if="allClassifyData[activeKey]?.image"
          v-lazy="getOtherImageUrl(allClassifyData[activeKey]?.image)">
        <div class="phones">
          <div class="item" v-for="item in allClassifyData[activeKey]?.sub" @click="goGoodsList(item)">
            <img v-lazy="getOtherImageUrl(item.image)">
            <span class="title f14">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <loading v-show="!allClassifyData.length"></loading>
  </div>
</template>
<script>
import eventBus from '@/common/event-bus';
import { Search, Sidebar, SidebarItem } from 'vant';
export default {
  name: "ClassifyView",
  components: {
    [Search.name]: Search,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
  },
  data() {
    return {
      activeKey: 0,
      allClassifyData: [],
      nodeHeight: 0,
      contentHeight: 0,
    }
  },
  created() {
    this.getListData();
  },
  mounted() {
    /* 拿到搜索框元素高度 */
    const seachNodeHeight = this.getNodeHeight(".search")
    this.nodeHeight = seachNodeHeight;
    /* 拿到底部导航栏高度 */
    const navigationNodeHeight = localStorage.getItem("chunkHeight");
    /* 拿到屏幕高度 */
    const windowHeight = localStorage.getItem("windowHeight");
    /* 给左侧导航设置高度 */
    const contentHeight = windowHeight - seachNodeHeight - navigationNodeHeight;
    this.contentHeight = contentHeight;
    /* 纠正导航 */
    eventBus.$emit("correctPath", window.location.pathname);//NavigationBar.vue
  },
  methods: {
    getListData() {
      this.$sendGet("Goods/getCategory")
        .then(res => {
          if (res.data.status === 200) {
            this.allClassifyData.push(...res.data.data)
            this.selectSidebar();
          }
        })
    },
    toSearchPage() {
      this.$router.push({ name: "search" })
    },
    getNodeHeight(ele) {
      const node = document.querySelector(ele);
      return node.clientHeight;
    },
    switchData(id) {
      this.activeKey = id;
    },
    goGoodsList(item) {
      this.$router.push({ name: "list", query: { id: item.id, name: item.name } })
    },
    selectSidebar() {
      /* 拿到首页传递过来的key */
      const { key } = this.$route.query;
      if (key) {
        const index = this.allClassifyData.findIndex(item => item.id == key * 1);
        this.activeKey = index;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .van-search__content {
  background-color: white;
}

::v-deep .van-sidebar-item--select::before {
  height: 100%;
}

::v-deep .van-sidebar-item {
  padding: 10px;
  padding-left: 30px;
}

.search {
  position: fixed;
  width: 375px;
  z-index: 9999;
}

.content {
  display: flex;

  .nav {
    flex-shrink: 0;
    width: 100px;
    font-size: 14px;
    background-color: #f7f8fa;

    .l-item {
      &.active {
        display: none;
      }
    }
  }

  .dataList {
    padding: 10px;
    overflow-y: scroll;

    .banner {
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      max-height: 70px;
    }

    .phones {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: flex-start;

      .item {
        flex-basis: 33.3333%;
        text-align: center;
        margin-bottom: 5px;

        img {
          padding: 5px;
          width: 100%;
        }
      }
    }
  }
}
</style>

